<template>
  <div class="rich-editor flex flex-col">
    <!-- <div ref="toolbar">
      <select class="ql-size">
        <option value="12px">12px</option>
        <option value="14px" selected>14px</option>
        <option value="16px">16px</option>
        <option value="18px">18px</option>
      </select>

      <button class="ql-bold"></button>
    </div> -->
    <div ref="root"></div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import Quill, { Parchment } from "quill";
import { Delta } from "quill/core";
import { SizeClass, SizeStyle } from "quill/formats/size";
//
import Bold from "quill/formats/bold";
import { ColorClass, ColorStyle } from "quill/formats/color";
//
import Scroll from "quill/blots/scroll";
import Block from "quill/blots/block";
import Break from "quill/blots/break";
import Cursor from "quill/blots/cursor";
import Inline from "quill/blots/inline";
import Text from "quill/blots/text";
// import Container from "quill/blots/container";

// 样式
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

defineOptions({
  name: "IsolateRichEditor",
});

SizeClass.whitelist = ["14px", "16px"];
SizeStyle.whitelist = ["14px", "16px"];
// const SizeClass = new Parchment.ClassAttributor("size", "ql-size", {
//   scope: Parchment.Scope.INLINE,
//   whitelist: ["12px", "14px", "16px", "18px"],
// });
// const SizeStyle = new Parchment.StyleAttributor("size", "font-size", {
//   scope: Parchment.Scope.INLINE,
//   whitelist: ["12px", "14px", "16px", "18px"],
// });

// Quill.register(SizeStyle, true);
// Quill.register(SizeClass, true);

const root = ref<HTMLElement>();
const toolbar = ref<HTMLElement>();
let editor: Quill | null = null;

// 局部化注册
const registry = new Parchment.Registry();

// registry.register(Bold, ColorClass, ColorStyle, SizeStyle, SizeClass);
registry.register(Scroll, Block, Break, Cursor, Inline, Text);

// 选择注册的格式
registry.register(Bold, SizeClass, SizeStyle);
onMounted(() => {
  editor = new Quill(root.value!, {
    // formats: ["size"],
    registry: registry,
    modules: {
      toolbar: [
        { font: [] },
        // { size: [] },
        { size: [false, "14px", "16px"] },
        // "bold",
        "italic",
        { list: "ordered" },
        { list: "bullet" },
        { list: "check" },
        { align: [] },
        { background: [] },
        { color: [] },

        "table",
      ],
    },
    // modules: {
    //   toolbar: {
    //     container: toolbar.value!,
    //   },
    // },
    theme: "snow",
  });
  const delta = new Delta().insert("Hello World!", { size: "14px" });
  const other = new Delta().retain(5, { bold: true }).delete(5);

  // console.log(
  //   delta.compose(other),
  //   new Delta()
  //     .insert("Hello ", { size: "14px" })
  //     .insert("World!", { size: "14px" })
  // );
});
</script>
<style lang="less" scoped>
.rich-editor {
  :deep(.ql-snow) {
    @font-sizes: 12px, 14px, 16px, 18px;
    // 默认
    @font-default: "Normal";

    .generate-font-size(@sizes, @set-font: false) {
      each(@sizes, {
        @value: extract(@sizes, @index);

        &[data-value="@{value}"]::before {
          content:"@{value}"
        }

        &[data-value="@{value}"]::before when (@set-font) {
          font-size:@value;
        }
      });
    }

    .ql-editor {
      each(@font-sizes, {
        @value: extract(@font-sizes, @index);

        .ql-size-@{value} {
          font-size: @value;
        }
      });
    }

    .ql-picker.ql-size {
      .ql-picker-label,
      .ql-picker-item {
        &::before {
          content: @font-default;
        }
      }

      .ql-picker-label {
        .generate-font-size(@font-sizes);
      }

      .ql-picker-item {
        .generate-font-size(@font-sizes, true);
      }
    }
  }
}
</style>
